<template>
    <div class="body-bg">
    <el-container>
        <el-header class="cashier-header" style="height: 80px">
            <el-row :gutter="8">
                <el-col :xs="5" :sm="6" :md="6" :lg="6" :offset="1"><div class="header-title">餐饮收银台</div></el-col>
                <el-col :xs="3" :sm="2" :md="2" :lg="2" :offset = "1"><router-link :to="{ name : 'order' }"><div class="header-btn">点餐</div></router-link></el-col>
                <el-col :xs="3" :sm="2" :md="2" :lg="2" :xl="1"><router-link :to="{ name : 'RowNum' }"><div class="header-btn">排号</div></router-link></el-col>
                <el-col :xs="3" :sm="2" :md="2" :lg="2" :xl="1"><router-link :to="{ name : '' }"><div class="header-btn" @click="reser()">预订</div></router-link></el-col>
                <el-col :xs="3" :sm="2" :md="2" :lg="2" :xl="1"><router-link :to="{ name : 'TablePlace' }"><div class="header-btn">桌位</div></router-link></el-col>
                <el-col :xs="3" :sm="2" :md="2" :lg="2" :xl="1"><router-link :to="{ name : 'takeMeals' }"><div class="header-btn">取餐</div></router-link></el-col>
                <el-col :xs="3" :sm="2" :md="2" :lg="2" :xl="1"><router-link :to="{ name : 'Clean' }"><div class="header-btn">沽清</div></router-link></el-col>
            </el-row>
        </el-header>
        <el-main class="cashier-main">
            <el-aside style="width: 80rem " class="centent float-left">
                <router-view/>
            </el-aside>
            <el-main class="right float-left">
                <div class="right-btn entry-btn" @click="entryDialog = true">挂单</div>
                <div class="right-btn bill-btn" @click="billOrder">提单</div>
                <div class="right-btn fast-btn" @click="fastPayDialog = true">快速收款</div>
                <div class="right-btn" @click="removeFocus">删除Del</div>
                <div class="right-btn" @click="openChangeNum">数量</div>
                <div class="right-btn" @click="cancelafter = true">核销</div>
            </el-main>
        </el-main>
<!--        挂单-->
        <el-dialog title="添加挂单备注" :visible.sync="entryDialog">
            <el-form :model="form">
                <el-form-item label="备注" :label-width="formLabelWidth" style="width: 32rem;">
                    <el-input v-model="remark" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="entryOrder">跳 过</el-button>
                <el-button type="primary" @click="entryOrder" :disabled="remark === null || remark === ''">确 定</el-button>
            </div>
        </el-dialog>
<!--        快速收款-->
        <el-dialog title="快速收款" :visible.sync="fastPayDialog" center>
            <div class="payMethod" style="margin-left: 5rem;">
                <div class="payMethod-item" @click="fastPayMethod = '扫码'" :class="{'pay-choice':fastPayMethod == '扫码'}">
                    <div class="pay-mask"><span></span></div>
                    <i class="method-1"></i>
                    扫码
                </div>
                <div class="payMethod-item" @click="fastPayMethod = '现金'" :class="{'pay-choice':fastPayMethod == '现金'}">
                    <div class="pay-mask"><span></span></div>
                    <i class="method-2"></i>
                    现金
                </div>
                <div class="payMethod-item" @click="fastPayMethod = 'POS'" :class="{'pay-choice':fastPayMethod == 'POS'}">
                    <div class="pay-mask"><span></span></div>
                    <i class="method-3"></i>
                    POS
                </div>
            </div>
            <el-input-number v-model="fastPayNum" controls-position="right" class="fast-pay" @change="handleChange" placeholder="输入收款金额(单位：元)" style="width: 410px;"></el-input-number>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="changeNum">立即收款</el-button>
            </div>
        </el-dialog>
<!--        数量-->
        <el-dialog title="修改数量" :visible.sync="changeNumDialog" center>
            <el-input-number v-model="count" controls-position="right" class="count-div" @change="handleChange" :min="1" :max="99" style="width: 248px;"></el-input-number>
            <div class="countOp">
                <span @click="addPayValue(1)">1</span><span @click="addPayValue(2)">2</span><span @click="addPayValue(3)">3</span>
                <span @click="addPayValue(4)">4</span><span @click="addPayValue(5)">5</span><span @click="addPayValue(6)">6</span>
                <span @click="addPayValue(7)">7</span><span @click="addPayValue(8)">8</span><span @click="addPayValue(9)">9</span>
                <span @click="addPayValue('.')">.</span><span @click="addPayValue(0)">0</span><span @click="delPayValue"><i></i></span>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="changeNumDialog = false">取 消</el-button>
                <el-button type="primary" @click="changeNum">确 定</el-button>
            </div>
        </el-dialog>
        <!--预订-->
        <el-dialog title="预订" :visible.sync="reservation">
            <div class="form-header">
                <el-row type="flex" class="row-bg" justify="space-between">
                    <el-col :span="4"><div class="grid-content bg-purple">
                        <span>门店：</span>
                    </div></el-col>
                    <el-col :span="9"><div class="grid-content bg-purple-light">
                        <span>日期：{{time}}</span>
                    </div></el-col>
                    <el-col :span="6"><div class="grid-content bg-purple">
                        <span>已预订：<span style="color: red;">{{booking}}</span></span>
                    </div></el-col>
                </el-row>
            </div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="ruleForm.phone"></el-input>
                </el-form-item>

                <el-row :gutter="20">
                    <el-col :span="12"><div class="grid-content bg-purple">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                    </div></el-col>
                    <el-col :span="12"><div class="grid-content bg-purple">
                        <el-form-item label="用餐人数" prop="bookHuman">
                            <el-input-number v-model="ruleForm.bookHuman" :min="1" :max="10" label="描述文字"></el-input-number>
                        </el-form-item>
                    </div></el-col>
                </el-row>

                <el-row :gutter="15">
                    <el-col :span="12"><div class="grid-content bg-purple">
                        <el-form-item label="到店时间" prop="bookDate">
                            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.bookDate" style="width: 100%;"></el-date-picker>
                            <el-time-picker
                                    arrow-control
                                    v-model="ruleForm.bookTime"
                                    :picker-options="{
                                      selectableRange: '18:30:00 - 20:30:00'
                                    }"
                                    placeholder="任意时间点" style="width: 182px;">
                            </el-time-picker>
                        </el-form-item>
                    </div></el-col>
                    <el-col :span="10"><div class="grid-content bg-purple">
                        <el-form-item label="餐桌" prop="tableNum">
                            <div>
                                <div class="tag" v-model="ruleForm.tableNum">{{ruleForm.tableNum}}</div>
                                <div>
                                    <button type="button" class="el-button el-button--text el-button--medium" @click="oprtableopent()">
                                        <i class="el-icon-view"></i>
                                        <span>选择</span>
                                    </button>
                                </div>

                            </div>
                        </el-form-item>
                    </div></el-col>
                </el-row>
                <el-form-item>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm('ruleForm')">确定预订</el-button>
                <el-button @click="resetForm('ruleForm')">取消</el-button>
            </div>
        </el-dialog>
        <!--选择桌位-->
        <el-dialog title="选择桌台" :visible.sync="oprtable">
            <div>
                <div>
                    <el-select v-model="value" placeholder="请选择" @change="select">
                        <el-option
                                v-for="item in tableTypesAll"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                        >
                        </el-option>
                    </el-select>
                </div>
                <div>
                    <div class="cart-alter" v-if="selectTable.length != 0">
                        <div class="col" v-for="item in selectTable">
                            <el-button @click="changeTable(item.tableNum)" :disabled="item.state != '空桌'">{{item.name}}</el-button>
                        </div>
                    </div>
                    <div class="cart-alter" v-if="selectTable.length == 0">
                        <img src="../assets/imgs/ia_100001880.png"/>
                        <div class="cart-empty">暂无餐桌</div>
                    </div>
                </div>
            </div>
        </el-dialog>
        <!--核销-->
        <el-dialog
                title="核销"
                :visible.sync="cancelafter"
                width="30%"
                center
                >

            <div class="paying-scanner">
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" :plain="canceType == true" @click="canceTypeSelect(false)">预订核销</el-button>
                    <el-button type="primary" :plain="canceType == false" @click="canceTypeSelect(true)">自提核销</el-button>
                </span>
                <p class="paying-help">请客户出示核销码，并用扫码枪对准进行扫描，或输入核销码后按回车</p>
                <img src="../assets/imgs/hx.png" class="paying-guide"/>
                <form class="scanner-code">
                    <input type="search" required="required" @input="selectCance()" v-model="canceInput"></input>
                </form>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelafter = false">取 消</el-button>
                <el-button type="primary" @click="canceEntry()" :disabled="isCance">确认核销</el-button>
            </span>
        </el-dialog>


    </el-container>
    </div>
</template>

<script>
    Date.prototype.format=function(fmt){
        var o = {
            "M+" : this.getMonth()+1,                 //月份
            "d+" : this.getDate(),                    //日
            "H+" : this.getHours(),                   //小时
            "m+" : this.getMinutes(),                 //分
            "s+" : this.getSeconds(),                 //秒
            "q+" : Math.floor((this.getMonth()+3)/3), //季度
            "S"  : this.getMilliseconds()             //毫秒
        };
        if(/(y+)/.test(fmt)) {
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
        }
        for(var k in o) {
            if(new RegExp("("+ k +")").test(fmt)){
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
            }
        }
        return fmt;
    }
    export default {
        data() {
            return {
                remark: '',
                activeIndex: '1',
                activeIndex2: '1',
                entryDialog: false,
                fastPayNum: '',
                fastPayMethod: '扫码',
                fastPayDialog: false,
                count: 0,
                changeNumDialog: false,
                verificationDialog: false,
                dialogFormVisible: false,
                reservation:false,
                oprtable:false,
                cancelafter:false,
                tableTypesAll:[],
                selectTable:[],
                value:2,
                time:'',
                booking:0,
                /*核销类型 true自带 false预订*/
                canceType:false,
                /*核销*/
                canceInput:'',
                /*是否允许核销*/
                isCance:true,
                /*查询到要核销的*/
                canceInfo:{},
                form: {
                    name: '',
                },
                formLabelWidth: '100px',
                ruleForm: {
                    bookHuman:'',
                    bookDate:'',
                    bookTime:'',
                    retainTime:30,
                    name: '',
                    tableNum:'',
                    phone:'',
                    customerId:'00000000',
                    deposit:'10',
                    state:'待消费'
                },
                rules: {
                    name: [
                        { required: true, message: '请输入预订人姓名', trigger: 'blur' },
                        { min: 2, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入预订人联系方式', trigger: 'blur' },
                        { min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' }
                    ],
                    bookHuman: [
                        { required: true, message: '请选择用餐人数', trigger: 'change' }
                    ],
                    bookDate: [
                        { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                    ],
                    bookTime: [
                        { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
                    ],
                    tableNum: [
                        { required: true, message: '请选择要预订的餐桌', trigger: 'change' }
                    ],
                }
            };
        },
        methods: {
            /*确认核销*/
            canceEntry(){
                this.canceInput = '';
                this.isCance = true;
                this.$notify({
                    title: '成功',
                    message: '核销成功',
                    type: 'success'
                });
            },
            flushEntry(){
                console.log("flushEntry")
                this.$store.commit("flushEntry");
            },
            canceTypeSelect(bool){
              this.canceType = bool;
              this.canceInput = '';
              this.isCance = true;
            },
            selectCance(){
                if(this.canceInput == ''){
                    this.isCance = true;
                    return;
                }
                let _this = this;
                /*预订*/
                if(!this.canceType){
                    this.$axios.post('/bookOrder/que/'+this.canceInput)
                        .then(function (response) {
                            _this.isCance = response.data[200] != undefined?false:true;
                            _this.canceInfo = response.data[200] == undefined?{}:response.data[200];
                        })
                }else{
                    /*自提*/
                    this.$axios.post('/ec/que/'+this.canceInput)
                        .then(function (response) {
                            _this.isCance = response.data[200] != undefined?false:true;
                            _this.canceInfo = response.data[200] == undefined?{}:response.data[200];
                        })
                }

            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleChange(value) {
                console.log(value);
            },
            load(){
                this.$store.commit("flushFoods");
            },
            billOrder(){
                console.log("bill")
                if(this.$store.state.focusTrIndex !== -1 && this.$store.state.seekTab === 1){
                    this.$store.commit("billOrder");
                    this.$store.commit("flushEntry");
                    this.billSucceedMsg();
                }
            },
            entryOrder(){
                this.entryDialog = false;
                if(this.remark === null || this.remark === ''){
                    this.remark = '无';
                }
                this.$store.commit("entryOrder",this.remark);
                this.$store.commit("clearMeals");
                this.entrySucceedMsg();
                this.flushEntry()
                this.remark = '';
            },
            entrySucceedMsg(){
                this.$notify({
                    title: '挂单成功',
                    message: '可在挂单区进行查看',
                    type: 'success'
                });
            },
            billSucceedMsg(){
                this.$notify({
                    title: '提单成功',
                    message: '点餐区进行操作订单',
                    type: 'success'
                });
            },
            openChangeNum(){
                if(this.$store.getters.changeNum > 0){
                    this.changeNumDialog = true;
                    this.count = this.$store.getters.changeNum;
                }
            },
            addPayValue(value){
                this.count += ''+value
            },
            delPayValue(){
                this.count = (this.count+'').substr(0,this.count.length - 1)
            },
            changeNum(){
                this.changeNumDialog = false;
                this.$store.commit("changeNum",this.count)
            },
            removeFocus(){
                this.$store.commit('removeEl');
            },
            reser(){
                this.reservation = true;
                let _this = this;
                this.$axios.post('/diningTable/czlb')
                    .then(function (response) {
                        _this.booking = 0;
                        response.data.forEach(re=>{
                            if(re.state == '已预约'){
                                _this.booking++;
                            }
                        })
                    })
            },
            submitForm(formName) {
                let _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post('bookOrder/save/',_this.ruleForm)
                            .then(function (response) {
                                _this.reservation = false;
                                _this.$message({
                                    message: '预订成功',
                                    type: 'success'
                                });
                            })
                            .catch(function (error) {
                                _this.$message.error('预订失败');
                            });
                    } else {
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.reservation = false;
                this.$refs[formName].resetFields();
            },
            select(){
                let _this = this;
                this.$axios.post('diningTable/table/'+this.value)
                    .then(function (response) {
                        _this.selectTable = response.data;
                    })
            },
            oprtableopent(){
                this.oprtable = true;
                let _this = this;
                this.$axios.post('/diningTable/zwlx')
                    .then(function (response) {
                        _this.tableTypesAll = response.data;
                    })
                this.select();
            },
            changeTable(num){
                this.ruleForm.tableNum = num;
                this.oprtable = false;
            },
        },
        created(){

        },
        mounted:function () {
            let _this = this;
            setInterval(function(){
                let tmeptime = new Date().format("yyyy/MM/dd HH:mm:ss");
                _this.time = tmeptime;
            }, 1000);
        }
    }

</script>

<style scoped>
    @import "../css/PublicCashier.css";
    @import "../css/Cashier.css";
</style>
